<template>
    <div class="kfbar">
      <div class="kfbox">
        <div class="kfico">
          <img src="../assets/kfbar_01.png" class="kficon" />
          <span>联系我们</span>
          <div class="kfitem fadeInRight">
            <div class="kftel">
              <div class="kftelt">联系方式</div>
              <div class="kftelc">
                <strong>消费者服务热线</strong><br />400-880-2280<br />
                <strong>投资者服务热线</strong><br />020-8753 3019<br />
                <strong>媒体业务咨询</strong><br />media@sfygroup.com<br />
                <strong>举报邮箱</strong><br />ica@sfygroup.com
              </div>
            </div>
          </div>
        </div>
        <div class="kfico">
          <img src="../assets/kfbar_02.png" class="kficon" />

          <span>公众号</span>
          <div class="kfitem fadeInRight">
            <div class="kftel">
              <div class="kfmat">扫码关注索菲亚</div>
              <img src="../assets/kfbar_01.jpg" class="kficon" />
            </div>
          </div>
        </div>
        <div
          class="kfico"
          onclick="$('#bmform').show(); $('#sign_tips').hide();"
        >
          <img src="../assets/kfbar_03.png" class="kficon" />
          <span>设计报名</span>
        </div>
        <div class="kfico kftop" onclick="Page_scrollTo()">
          <img src="../assets/kfbar_04.png" class="kficon" />
          <span>返回顶部</span>
        </div>
      </div>
    </div>
</template>

<style scoped>
/* 右侧浮动bar */

.kfbar {
  width: 65px;
  height: auto;
  position:fixed;
  right: 20px;
  top: 50%;
  margin-top: -120px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px dashed #996c33;
  border-radius:10px;
  z-index: 100;
}

.kfbox {
  width: 65px;
  height: 100%;
  float: right;
}

.kfico {
  height: 55px;
  width: 65px;
  padding: 5px 0 5px;
  cursor: pointer;
}
/* .kfico img*/
.kficon { 
  display: block;
  height: 22px;
  margin: 0 auto;
}

.kfico span {
  display: block;
  padding-top: 3px;
  height: 30px;
  line-height: 30px;
  color: #996c33;
  text-align: center;
}

.kfitem {
  width: 190px;
  height: 300px;
  position: absolute;
  top: 0;
  right: 65px;
  display: none;
}

.kftel {
  width: 180px;
  height: 300px;
  border: 1px solid #b49c8e;
  border-radius: 5px;
  background: #f4efe7;
  overflow: hidden;
}
.kftelt,
.kfmat {
  height: 45px;
  line-height: 45px;
  color: #fff;
  background: #b49c8e;
  text-align: center;
  font-size: 16px;
}
.kftelt {
  background: #b49c8e;
  background-size: 22px;
}
.kftelc {
  height: auto;
  padding: 20px 0 0 20px;
  font-size: 12px;
  color: #5f4d4a;
  line-height: 200%;
}

.kftel img {
  width: 140px;
  height: auto;
  display: block;
  position: relative;
  margin: 20px auto;
}

.kfico:hover .kfitem {
  display: block;
}

.kfico:hover span {
  font-weight: bold;
}

.kfsmall {
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: fixed;
  right: 5px;
  top: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px dashed #ccc;
  border-radius: 50%;
  z-index: 100;
  display: none;
  font-size: 26px;
  text-align: center;
  color: #999;
  cursor: pointer;
}
</style>